<template>
  <view class="he-page-content flex" scroll-y :style="{ height: height }">
    <scroll-view class="index-scroll" :scroll-top="scrollTop" scroll-with-animation scroll-y :data-theme="theme">
      <view
        class="he-item flex align-center"
        @click="setSelect(index)"
        :class="current === index ? 'he-item__1' : ''"
        v-for="(item, index) in list"
        :key="item.id"
      >
        <text class="he-item__text">{{ item.name }}</text>
      </view>
    </scroll-view>
    <view class="flex-sub he-right">
      <view class="index-small-search">
        <view class="he-input flex align-center" @click="navigateTo">
          <text class="iconfont iconsearchbar_search"></text>
          <text class="he-placeholder">输入商品名称搜索</text>
        </view>
      </view>
      <index-a
        :group="item.id"
        :goods-show="item.goods_show"
        v-if="item.type === 1"
        :goods-loading.sync="goodsLoading"
      ></index-a>
      <index-b :list="item.children" v-else-if="item.type === 2"></index-b>
      <index-c :list="item.children" v-else-if="item.type === 3"></index-c>
    </view>
    <HeLoginModel />
  </view>
</template>
<script>
import indexA from './component/index-a.vue';
import indexB from './component/index-b.vue';
import indexC from './component/index-c.vue';
import HeLoginModel from '../../components/he-login-layout.vue';
import { mapActions } from 'vuex';

export default {
  name: 'index',
  components: {
    indexA,
    indexB,
    indexC,
    HeLoginModel
  },
  data() {
    return {
      list: [],
      current: 0,
      scrollTop: 0,
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      page: {
        current: 1,
        size: 10
      },
      item: {
        goods_show: null
      },
      goodsLoading: false,
      height: '100vh'
    };
  },
  methods: {
    ...mapActions({
      setCartNumber: 'cart/setCartNumber'
    }),
    async setSelect(index) {
      if (index == this.current || this.goodsLoading) return;
      this.current = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('index-scroll', 'menuHeight');
        await this.getElRect('he-item', 'menuItemHeight');
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('.' + elClass)
          .fields({ size: true }, res => {
            // 如果节点尚未生成，res值为null，循环调用执行
            if (!res) {
              setTimeout(() => {
                this.getElRect(elClass);
              }, 10);
              return;
            }
            this[dataVal] = res.height;
          })
          .exec();
      });
    },
    getCatList: function () {
      let _this = this;
      this.$heshop
        .group('get', {
          merchant_id: 1,
          include: 'goods',
          type: 'all'
        })
        .then(function (res) {
          _this.list = _this.$heshop
            .toTree({
              parentKey: 'parent_id',
              idKey: 'id',
              parentId: 0,
              childrenKey: 'children'
            })
            .on(res)
            .get();
          _this.item = _this.list[_this.current];
        })
        .catch(function (err) {
          _this.$toError(err);
        });
    },
    navigateTo: function () {
      uni.navigateTo({ url: '/pages/goods/search' });
    }
  },
  onLoad() {
    // #ifdef H5
    let self = this;
    uni.getSystemInfo({
      success: function (res) {
        self.height = res.windowHeight + res.windowTop + 'px';
      }
    });
    // #endif
    this.getCatList();
  },
  watch: {
    current: {
      handler(newVal) {
        this.item = this.list[newVal];
      }
    }
  },
  onShow() {
    if (this.isLogin) {
      this.setCartNumber();
    }
  }
};
</script>
<style scoped lang="scss">
.he-page-content {
  background: #ffffff;
  min-height: auto;
}
.he-right {
  height: 100%;
}
.index-scroll {
  width: 180px;
  height: 100%;
  background: #f5f5f5;
}

.he-item {
  width: 180px;
  height: 88px;
}

.he-item__1 {
  background: #ffffff;
}

.he-item__1 .he-item__text {
  @include font_color('font_color');
  @include border_color('border_color');
  border-left-style: solid;
  border-left-width: 4px;
}

.he-item__text {
  display: inline-block;
  width: 100%;
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: #666666;
  border-left: 4px solid transparent;
}

.index-small-search {
  width: 570px;
  height: 104px;
  background: #ffffff;
  overflow: hidden;
}

.he-input {
  width: 529px;
  height: 64px;
  background: #f7f7f7;
  border-radius: 32px;
  margin: 20px;
}

.iconsearchbar_search {
  font-size: 28px;
  color: #999999;
  margin-right: 16px;
  margin-left: 32px;
}

.he-placeholder {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
</style>
